<!DOCTYPE html>
<html ng-app="oppia">
  <head>
    <noscript>
      <meta http-equiv="refresh" content="1;url=/static/pages/noscript.txt">
    </noscript>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Oppia - {% block subtitle %}{% endblock %}</title>

    {% block header_css %}
      {% include 'header_css_libs.html' %}
    {% endblock header_css %}

    <script>
      var GLOBALS = {
        csrf_token: JSON.parse('{{csrf_token|js_string}}'),
        DEV_MODE: JSON.parse('{{DEV_MODE|js_string}}'),
        INVALID_NAME_CHARS: JSON.parse('{{INVALID_NAME_CHARS|js_string}}'),
        EXPLORATION_STATUS_PRIVATE: JSON.parse(
          '{{EXPLORATION_STATUS_PRIVATE|js_string}}'),
        EXPLORATION_STATUS_PUBLIC: JSON.parse(
          '{{EXPLORATION_STATUS_PUBLIC|js_string}}'),
        EXPLORATION_STATUS_PUBLICIZED: JSON.parse(
          '{{EXPLORATION_STATUS_PUBLICIZED|js_string}}')
      };
    </script>

    {% block header_js %}
      {% include 'header_js_libs.html' %}
    {% endblock header_js %}

    {{BEFORE_END_HEAD_TAG_HOOK}}
  </head>

  <body ng-controller="Base">
    {% if not iframed %}
      <div id="wrapper">
        <div class="oppia-main-body">
          <!-- nav bar -->
          <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-container">
              <div class="container">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>

                <div class="navbar-header">
                  <a class="navbar-brand" href="/">
                    <img src="/images/logo.png" class="oppia-logo">
                    Oppia&nbsp;<sup>beta</sup>
                  </a>
                </div>

                <div class="collapse navbar-collapse">
                  <ul class="nav navbar-nav">
                    <li {% if nav_mode == 'learn' %}class="active"{% endif %}>
                      <a href="/learn">Learn</a>
                    </li>
                    <li {% if nav_mode == 'playtest' %}class="active"{% endif %}>
                      <a href="/playtest">Playtest</a>
                    </li>
                    <li {% if nav_mode == 'contribute' %}class="active"{% endif %}>
                      <a href="/contribute">Contribute</a>
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown">
                        About
                        <b class="caret"></b>
                      </a>
                      <ul class="dropdown-menu">
                        {% for page in ABOUT_PAGES %}
                          <li>
                            <a href="{{page['url']}}">{{page['name']}}</a>
                          </li>
                        {% endfor %}
                      </ul>
                    </li>
                    {% block navbar_additions %}
                    {% endblock %}
                  </ul>

                  <ul class="nav navbar-nav navbar-right">
                    {% if user_email %}
                      <li {% if nav_mode == 'profile' %} class="active" {% endif %}>
                        <a href="/profile">Profile</a>
                      </li>
                      <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown">
                          {% if username %}
                            {{username}}
                          {% else %}
                            {{user_email}}
                          {% endif %}

                          {% if is_admin %}
                            (Admin)
                          {% elif is_moderator %}
                            (Moderator)
                          {% endif %}
                          <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                          <li>
                            <a href="{{logout_url}}">Logout</a>
                          </li>

                          {% if is_super_admin %}
                            <li>
                              <a href="/admin" target="_blank">
                                Admin Page
                              </a>
                            </li>
                          {% endif %}
                        </ul>
                      </li>
                    {% else %}
                      <li>
                        <a href="{{login_url}}">Login</a>
                      </li>
                    {% endif %}
                  </ul>
                </div>
              </div>
            </div>
          </nav>
    {% endif %}

    <div ng-cloak>
      <div class="oppia-alert-blocks">
        <div ng-repeat="warning in (warningsData.warnings | limitTo:5) track by $index">
          <p class="alert alert-warning">
            <button type="button" class="close" ng-click="warningsData.deleteWarning($index)">&times;</button>
            <strong>Warning!</strong>
            <[warning]>
          </p>
        </div>
      </div>

      <div ng-show="loadingMessage" class="oppia-loading-fullpage">
        <div class="oppia-align-center">
          <[loadingMessage]>
          <span class="oppia-loading-dot-one">.</span>
          <span class="oppia-loading-dot-two">.</span>
          <span class="oppia-loading-dot-three">.</span>
        </div>
      </div>
      <div ng-show="!loadingMessage">
        {% block content %}{% endblock %}
      </div>
    </div>

    {% if not iframed %}
        </div>

        <div class="oppia-footer" role="contentinfo">
          <div class="container">
            <ul class="oppia-footer-nav col-lg-8 col-md-8 col-sm-8">
              <li>
                <a href="/">Home</a>
              </li>
              <li>
                <a href="/learn">Learn</a>
              </li>
              <li>
                <a href="/playtest">Playtest</a>
              </li>
              {% if user_email %}
                <li>
                  <a href="/contribute">Contribute</a>
                </li>
              {% endif %}
              {% for page in ABOUT_PAGES %}
                <li>
                  <a href="{{page['url']}}">{{page['name']}}</a>
                </li>
              {% endfor %}
            </ul>
            {% if nav_mode in ['explore', 'create'] %}
              <span class="col-lg-4 col-md-4 col-sm-4" style="margin-top: 10px;">
                <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
                  <img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" />
                </a>
                <span style="font-size: 0.8em">
                  <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">This exploration</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="{{FULL_SITE_URL}}/static/pages/attribution.txt" property="cc:attributionName" rel="cc:attributionURL">[no attribution required]</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>. Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="{{FULL_SITE_URL}}" rel="dct:source">{{FULL_SITE_URL}}</a>.
                </span>
              </span>
            {% endif %}
            </ul>
          </div>
        </div>
      </div>
    {% endif %}

    {% include 'footer_js_libs.html' %}
    {% include 'rte_js_libs.html' %}

    <script>
      {{ include_js_file('app.js') }}
      {{ include_js_file('directives.js') }}
      {{ include_js_file('filters.js') }}
      {{ include_js_file('services/activeInputData.js') }}
      {{ include_js_file('services/warningsData.js') }}
      {{ include_js_file('services/messengerService.js') }}
      {{ include_js_file('components/autocomplete.js') }}
      {{ include_js_file('components/richTextEditor.js') }}
      {{ include_js_file('components/visualizations.js') }}
      {{ include_js_file('base.js') }}
    </script>

    {% block footer_js %}
    {% endblock footer_js %}

  </body>
</html>
